<template>
    <div class="box">
        <router-link to="/home/">
            <div class="subtitle" id="subtitle1">
                首页
            </div>
        </router-link>
        <router-link to="/rooms">
            <div class="subtitle" id="subtitle2">
                房间
            </div>
        </router-link>
            <div @click="myMsg" class="subtitle" id="subtitle3">
                个人信息
            </div>

        <div class="bottomTitle">
            <div style="display: flex;padding: 10px;color: #fff;font-size: 13px;">
                <div style="width: 50%;text-align: left;">常玩分类</div>
                <div style="width: 50%;text-align: right;">#全部分类</div>
            </div>
            <div
                style="width: 100%;padding: 10px;color: #dcdcdc;margin-top: -15px;margin-left: -10px; display: flex;flex-wrap: wrap;justify-content: space-around">
                <div v-for="item in Games" :key="item.id"
                    style="font-family:宋体;width: 41%;height: 30px;text-align: center;line-height: 33px;background-color: #0e175c80;margin: 10px;border-radius: 5px;cursor: pointer;">
                    <svg t="1711433741330" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3488"
                        data-spm-anchor-id="a313x.search_index.0.i1.6a553a815X79TS" width="18" height="17">
                        <path
                            d="M737.592 297.85c19.144 46.301 43.945 133.341 38.467 217.714-5.52 76.221-35.753 149.724-43.986 217.753 2.314-2.268 76.58-75.822 100.132-165.576 3.604-13.803 23.332-14.556 27.868-0.977 18.79 56.232 28.718 124.84 12.155 196.52-25.959 100.532-106.675 199.056-207.34 235.208a27.433 27.433 0 0 1-36.377-30.495c12.6-69.452 10.46-198.789-58.588-231.956 2.76 78.935-43.945 106.184-76.934 152.443-19.235-2.714-126.443-163.308-82.452-269.445 0 0-167.89 101.688-79.606 334.715 8.592 22.66-14.827 44.298-37.53 35.348-58.101-22.886-143.759-83.789-174.166-247.588C47.908 372.424 482.217 320.512 452.163 17.01A15.447 15.447 0 0 1 477.225 3.43c64.83 52 212.73 179.334 260.367 294.42"
                            fill="#d81e06" p-id="3489" data-spm-anchor-id="a313x.search_index.0.i0.6a553a815X79TS"
                            class="selected"></path>
                    </svg>
                    <span>{{ item.gameName }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      Games: [
        { id: '1', gameName: '王者荣耀' },
        { id: '2', gameName: '扩列聊天' },
        { id: '3', gameName: '永劫无间' },
        { id: '4', gameName: '休闲生活' }
      ],
      myUser: [JSON.parse(sessionStorage.getItem('user'))]
    }
  },
  methods: {
    myMsg () {
      if (this.myUser[0].ustatusID === 0) {
        this.$notify({
          title: '信息',
          message: '登录后享更多权限'
        })
      } else {
        this.$router.push({ path: '/myMsg' })
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.box{
    width: 290px;
    height: 675px;
    background-color: #3442a825;
    box-shadow: 3px 0 5px 0 #0016416d;
    padding-top: 10px;

    .subtitle{
        width: 80%;
        height: 65px;
        text-align: left;
        padding-left: 20px;
        line-height: 65px;
        margin: 10px;
        border-radius: 13px;
        color: rgb(255, 255, 255);
        cursor: pointer;
        border: 1.5px solid rgb(42, 42, 42);
        font-size: 18px;
        font-family: 简体;
    }
    #subtitle1{
        background: #9cecfb;  /* fallback for old browsers */      background: -webkit-linear-gradient(to left, rgb(156, 236, 251), rgb(101, 199, 247), rgb(0, 82, 212));   background: linear-gradient(to left, rgb(156, 236, 251),rgb(0, 82, 212));
    }
    #subtitle2{
        background: #e0eafc;background: #4da0b0;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(77, 160, 176), rgb(211, 157, 56));  background: linear-gradient(to right, rgb(77, 160, 176), rgb(211, 157, 56));    }
    #subtitle3{
        background: #4ca1af;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(76, 161, 175), rgb(196, 224, 229));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(76, 161, 175), rgb(196, 224, 229)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    #subtitle1:hover{
        background: #9cecfb;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(156, 236, 251), rgb(101, 199, 247), rgb(0, 82, 212));   background: linear-gradient(to right, rgb(156, 236, 251),rgb(0, 82, 212));
        border: 1.5px solid rgb(255, 255, 255);
    }
    #subtitle2:hover{
        background: #e0eafc;background: #4da0b0;  /* fallback for old browsers */      background: -webkit-linear-gradient(to left, rgb(77, 160, 176), rgb(211, 157, 56));  background: linear-gradient(to left, rgb(77, 160, 176), rgb(211, 157, 56));
        border: 1.5px solid rgb(255, 255, 255);
    }
    #subtitle3:hover{
        background: #4ca1af;  /* fallback for old browsers */      background: -webkit-linear-gradient(to left, rgb(76, 161, 175), rgb(196, 224, 229));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to left, rgb(76, 161, 175), rgb(196, 224, 229)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border: 1.5px solid rgb(255, 255, 255);
    }
    .bottomTitle{
        width: 100%;
        height: 435px;
    }

}
</style>
